<!--银行转账审核-审核详情-->
<template>
    <div class="auditDetail">
        <el-breadcrumb separator="/" class="bread-title">
            <el-breadcrumb-item :to="{ path: '/transferAuditList' }">银行转账审核</el-breadcrumb-item>
            <el-breadcrumb-item>{{type === 'view'? '查看': '审核'}}详情页</el-breadcrumb-item>
        </el-breadcrumb>
        <div class="mt20 mb20">基本信息</div>
        <table border="1" cellspacing="0" cellpadding="0">
            <tr>
                <th>姓名</th>
                <th>手机号</th>
                <th>性别</th>
                <th>证件类型</th>
                <th>证件号码</th>
                <th>证件姓名</th>
            </tr>
            <tr>
                <td>{{auditInfo.customerName}}</td>
                <td>{{auditInfo.customerPhone | formatPhoneNumber}}</td>
                <td>{{auditInfo.customerSex}}</td>
                <td>{{auditInfo.idType}}</td>
                <td>{{auditInfo.idNum}}</td>
                <td>{{auditInfo.idCardName}}</td>
            </tr>
        </table>
        <div class="mt20 mb20">认筹订单</div>
        <table border="1" cellspacing="0" cellpadding="0">
            <tr>
                <th>订单编号</th>
                <th>楼盘名称</th>
                <th>合作模式</th>
                <th>购买优惠</th>
            </tr>
            <tr>
                <td>{{auditInfo.orderCode}}</td>
                <td>{{auditInfo.devName}}</td>
                <td>{{auditInfo.coop}}</td>
                <td>{{auditInfo.sale}}</td>
            </tr>
            <tr>
                <th>应付金额(元)</th>
                <th>已付金额(元)</th>
                <th>待付金额(元)</th>
                <th>创建时间</th>
            </tr>
            <tr>
                <td>￥{{auditInfo.pay | formatMoney}}</td>
                <td>￥{{auditInfo.paid | formatMoney}}</td>
                <td>￥{{auditInfo.toBePay | formatMoney}}</td>
                <td>{{auditInfo.orderCreateTime}}</td>
            </tr>
        </table>
        <div class="mt20 mb20">支付信息</div>
        <table border="1" cellspacing="0" cellpadding="0">
            <tr>
                <th>支付金额(元)</th>
                <th>支付时间</th>
                <th>收款方</th>
                <th>收款账号</th>
            </tr>
            <tr>
                <td>￥{{auditInfo.payOnThisTime | formatMoney}}</td>
                <td>{{auditInfo.payTime}}</td>
                <td>{{auditInfo.receiveCompanyName}}</td>
                <td>{{auditInfo.receiveBankCode}}</td>
            </tr>
            <tr>
                <th>支付方式</th>
                <th>交易订单号</th>
                <th>提交人</th>
                <th>提交时间</th>
            </tr>
            <tr>
                <td>{{auditInfo.payType | payMthods}}</td>
                <td>{{auditInfo.tradeOrderCode}}</td>
                <td>{{auditInfo.submitPerson}}</td>
                <td>{{auditInfo.createTime}}</td>
            </tr>
            <tr>
                <th>付款银行(开户支行)</th>
                <th>付款账号</th>
                <th>交易流水号</th>
                <th>——</th>
            </tr>
            <tr>
                <td>{{auditInfo.bankName}}</td>
                <td>{{auditInfo.bankCardNum}}</td>
                <td>{{auditInfo.serialNumber}}</td>
                <td>——</td>
            </tr>
        </table>

        <div v-if="auditInfo.paymentVoucher.length">
            <div class="mt20 mb20">支付凭证</div>
            <div class="mt20 mb20">
                <el-image style="width: 200px; height: 200px; margin-right: 5px;border-radius: 3px" v-for="(item,index) in  auditInfo.paymentVoucher" :preview-src-list="auditInfo.paymentVoucher" :key="index" :src="item" alt=""></el-image>
            </div>
        </div>
        <div v-if="type==='view'">
            <div v-if="auditInfo.receiveVoucher.length">
                <div class="mt20 mb20">收款凭证</div>
                <div class="mt20 mb20">
                    <el-image style="width: 200px; height: 200px; margin-right: 5px;border-radius: 3px" :src="item" :preview-src-list="auditInfo.receiveVoucher" v-for="(item,index) in  auditInfo.receiveVoucher" :key="index" alt=""></el-image>
                </div>
            </div>
            <div class="mt20 mb20">操作记录</div>
            <table border="1" cellspacing="0" cellpadding="0">
                <tr>
                    <th>操作</th>
                    <th>审核意见</th>
                    <th>操作人</th>
                    <th>操作时间</th>
                </tr>
                <tr v-for="(item,index) in auditInfoList" :key="index">
                    <td>{{item.status | status}}</td>
                    <td>{{item.remark}}</td>
                    <td>{{item.operatorName}}</td>
                    <td>{{item.createTime | time}}</td>
                </tr>
            </table>
        </div>
        <div v-else>
            <div class="mt20 mb20"><span style="color: red">*</span>上传收款凭证</div>
            <div class="mt20">
                <!-- <uploadImg @uploadSuccess="uploadSuccess"></uploadImg> -->
                <Upload :multiple="true" ref="upload"/>
                <span class="tips">格式支持jpg/png,建议尺寸X*X像素</span>
            </div>
            <div class="mt20 mb20">审核</div>
            <div>
                <el-input type="textarea" maxlength="100" :autosize="{ minRows: 3, maxRows: 4}" v-model="auditInfo.remark" auto-complete="off" placeholder="请输入" class="w-320"></el-input>
                <div class="w-320 mt10" style="text-align: right">
                    {{auditInfo.remark.length}}/{{100-auditInfo.remark.length}}
                </div>
            </div>
            <div>
                <el-button type="primary" @click="pass">通 过</el-button>
                <el-button type="primary" @click="refuse">拒 绝</el-button>
            </div>
        </div>
    </div>
</template>

<script type="text/ecmascript-6">
    // import uploadImg from "@/components/common/MultipleImgUpload"
    import Upload from '@/components/common/Upload'

    import api from '@/api/apiPath'
    import utils from '@/common/utils.js'

    export default {
        name: 'auditDetail',
        data() {
            return {
                auditInfo: {
                    remark: "",
                    receiveVoucher: [],
                    paymentVoucher: [],//支付凭证
                    printscreen:[],//新增截图
                    images:[]
                },
                auditInfoList: [],
                auditStatus:1,//审核状态 1通过 2拒绝
            }
        },
        created() {
            this.type = this.$route.query.type;
            this.transferId = this.$route.query.id;
            this.getRaiseTransferDetail();
            this.getRaiseTransferDetailRemark();
        },
        mounted() {

        },
        methods: {
            // uploadSuccess(img) {
            //     this.auditInfo.images = img
            // },
            upload() {
                this.$refs.upload
                    .submit()
                    .then((res)=> {
                        this.auditInfo.images = res
                        if (this.auditStatus ==1) {
                            if (this.auditInfo.images.length==0) {
                                this.$message({
                                    message: '请上传收款凭证',
                                    type: 'warning'
                                });
                                return false
                            } 
                        }
                        let remarks = this.auditInfo.remark;
                        let images =  this.auditInfo.images;
                        if (!remarks) {
                            remarks = this.auditStatus === 1 ? '通过' : '拒绝'
                        }
                        if (!images) {
                            images = ""
                        }
                        let cmsUser = JSON.parse(sessionStorage.getItem("cmsUser"));
                        this.axios.post(api.raiseTransferDetailAudit, {
                            transferId: this.transferId,
                            auditStatus: this.auditStatus,
                            operatorId: cmsUser.userId,
                            operatorName: cmsUser.name,
                            remark: remarks,
                            receiveVoucher: images
                        }).then((res) => {
                            console.log(res);
                            if (res.data.code === 200) {
                                this.$message({
                                    message: '操作成功',
                                    type: 'success'
                                });
                                this.$router.push({path: "./transferAuditList"})
                            }
                        })
                    })
                    .catch(error => {
                        console.log(error)
                    })
            },
            refuse() {
                // this.raiseTransferDetailAudit(2)
                if (this.auditInfo.remark == '') {
                    this.$message({
                        message:'审核原因不能为空',
                        type:'warning'
                    })
                    return
                }
                this.auditStatus = 2
                this.upload()
            },
            pass() {
                this.auditStatus = 1
                this.upload()
                // if (this.auditInfo.images) {
                //     this.raiseTransferDetailAudit(1)
                // } else {
                //     this.$message({
                //         message: '请上传收款凭证',
                //         type: 'warning'
                //     });
                //     return false
                // }
            },
            // raiseTransferDetailAudit(auditStatus) {
            //     let remarks = this.auditInfo.remark;
            //     let images = this.auditInfo.images;
            //     if (!remarks) {
            //         remarks = auditStatus === 1 ? '通过' : '拒绝'
            //     }
            //     if (!images) {
            //         images = ""
            //     }
            //     let cmsUser = JSON.parse(sessionStorage.getItem("cmsUser"));
            //     this.axios.post(api.raiseTransferDetailAudit, {
            //         transferId: this.transferId,
            //         auditStatus: auditStatus,
            //         operatorId: cmsUser.userId,
            //         operatorName: cmsUser.name,
            //         remark: remarks,
            //         receiveVoucher: images.split(","),
            //     }).then((res) => {
            //         console.log(res);
            //         if (res.data.code === 200) {
            //             this.$message({
            //                 message: '操作成功',
            //                 type: 'success'
            //             });
            //             this.$router.push({path: "./transferAuditList"})
            //         }
            //     })
            // },
            getRaiseTransferDetail() {
                this.axios.get(api.raiseTransferDetail + this.transferId).then((res) => {
                    this.auditInfo = res.data.data;
                    //支付凭证 = 支付凭证+截图
                    this.auditInfo.paymentVoucher =  this.auditInfo.paymentVoucher.concat(this.auditInfo.printscreen)
                    if (!this.auditInfo.remark) {
                        this.$set(this.auditInfo, 'remark', '')
                    }
                })
            },
            getRaiseTransferDetailRemark() {
                this.axios.get(api.raiseTransferDetailRemark + this.transferId).then((res) => {
                    this.auditInfoList = res.data.data;
                })
            }

        },
        components: {Upload},
        filters: {
            payMthods(val){
               if (val === 0) {
                   return '银行转账'
               }else if(val === 1){
                   return '微信支付'
               }else if (val === 2) {
                   return '支付宝支付'
               }else if (val === 3) {
                   return '刷卡'
               }else if (val === 4) {
                   return '现金'
               }else if (val === 5) {
                   return '云闪付支付'
               }
            },
            status(status) {
                // return ['提交', '审核成功', '审核拒绝'][status]
                if (status !== -1) {
                    return ['提交', '审核成功', '审核拒绝'][status]
                } else {
                    return '撤回'
                }
            },
            time(time) {
                return utils.getTimeString(time)
            },
            formatMoney(money) {
                return utils.formatMoney(money)
            },
            formatPhoneNumber(cellValue) {
                return utils.formatPhoneNumber(cellValue)
            },
        },
        computed: {}
    }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="stylus" scoped>
    .auditDetail {
        width: 1100px;
        table {
            width: 100%;
            margin: 10px 0;
            border-collapse: collapse;
            border: 1px solid #ebeef5;
            td, th {
                padding: 10px;
                text-align: center;
            }
            th {
                background: #f5f7fa;
            }
            td {
                font-size: 14px;
            }
        }
        .tips {
            color: #666;
            font-size: 12px;
        }
    }
</style>
